
<template>
  <div>
    <el-dialog
      title="打印出车单详情"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      v-if="dialogVisible"
    >
      <el-row>
        <el-col :span="24">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="query">确定打印</el-button>
        </el-col>
      </el-row>

      <div style="padding: 20px;background-color: white;width:100%;" ref="printarea">
        <div
          style="padding: 20px;background-color: white;"
          v-for="(data_, index) in this.data"
          :key="index"
        >
          <el-row>
            <el-col :span="24">
              <div style="text-align: center;">
                <b style="font-size: 26px; margin: 20px 0;">出车单</b>
              </div>
            </el-col>
            <el-col :span="24">
              <div style>
                <b style="font-size: 18px; margin: 20px 0;">订单编号</b>
                <b style="font-size: 18px; margin: 20px 0;">{{data_.procid}}</b>
              </div>
            </el-col>
          </el-row>
          <br />

          <el-row class="erow">
            <el-col :span="24">
              <div
                class="grid-content bg-purple-dark span-color"
              >
                <b >申请信息</b>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top" style>
                <b>申请人：</b>
                {{data_.usecar.userName}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>所在单位：</b>
                {{ data_.usecar.companyName}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>申请时间：</b>
                {{ data_.usecar.createtime }}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple-light padding-top">
                <b>用车理由:</b>
                {{data_.usecar.mark}}
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row class="erow">
            <el-col :span="24">
              <div class="grid-content bg-purple-light padding-top">
                <b>用车人数:</b>
                {{data_.usecar.carcount}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>开始时间：</b>
                {{ data_.usecar.createtime }}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple-light padding-top">
                <b>结束时间：</b>
                {{data_.usecar.endtime}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple-light padding-top">
                <b>始发地：</b>
                {{data_.usecar.origin}}
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row class="erow">
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>目的地：</b>
                {{ data_.usecar.destination }}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple-light padding-top">
                <b>申请备注：</b>
                {{data_.usecar.reason}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple-light padding-top">
                <b>状态：</b>
                {{data_.usecar.taskname}}
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row>
            <el-col :span="24">
              <div
                class="grid-content bg-purple-dark span-color"
              >
                <b>用车审核</b>
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row class="erow">
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>审核人：</b>
                {{data_.shenhe.userName}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>审核时间：</b>
                {{data_.shenhe.optime}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>审核状态：</b>
                {{data_.shenhe.passStr}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>备注：</b>
                {{data_.shenhe.mark}}
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row class="erow">
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>审批人：</b>
                {{data_.shenpi.userName}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>审批时间：</b>
                {{data_.shenpi.optime}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>审批状态：</b>
                {{data_.shenpi.taskName}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>备注：</b>
                {{data_.shenpi.mark}}
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row class="erow">
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>调度人：</b>
                {{data_.diaodu.userName}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>调度时间：</b>
                {{data_.diaodu.optime}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>备注：</b>
                {{data_.diaodu.mark}}
              </div>
            </el-col>
          </el-row>
          <br />

          <el-row>
            <el-col :span="24">
              <div
                class="grid-content bg-purple-dark span-color"
              >
                <b>出车信息</b>
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row class="erow">
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>司机：</b>
                {{data_.diaodu.driverName}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>车牌号：</b>
                {{data_.diaodu.carcode}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>出车时间：</b>
                {{data_.diaodu.fctime}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>结束时间：</b>
                {{data_.diaodu.endtime}}
              </div>
            </el-col>
          </el-row>
          <br />
          <el-row class="erow">
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <b>行驶里程：</b>
                {{data_.txgbnum}}
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple padding-top">
                <el-col :span="24">
                  <b>费用明细：</b>
                </el-col>
                <el-col :span="2" v-if="data_.feiyong.fy==0">无</el-col>
                <el-col :span="8" v-if="data_.feiyong.fy==1">停车费 {{data_.feiyong.tcf}}</el-col>
                <el-col :span="8" v-if="data_.feiyong.fy==1">其他费 {{data_.feiyong.qtf}}</el-col>
              </div>
            </el-col>
          </el-row>
          <br />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findAllArticles } from "@/api/infomaction";
import { orderListJson, orderJson } from "@/api/vehicle";
import { axios } from "@/api/axios";
// 引入vuex
import { mapGetters } from "vuex";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Array,
      default: true,
    },
  },
  computed: {
    //获取左侧单位勾选的id数组 [1,2,3]
    ...mapGetters(["userInfo", "selectedComIds"]),
  },
  data() {
    return {
      printObj: {
        id: "printTest",
        popTitle: "出车单数据表",
        extraCss: "",
        extraHead: "",
      },
      tableData: [],
      articleIdName: "",
      multipleSelection: [],
      total: 0,
      pageNo: 1,
      pageSize: 10, //默认每页显示10条
    };
  },
  watch: {
    data() {
      if (this.data.length != 0) {
        console.log(this.data[0]);
      }
    },
  },
  created() {},
  methods: {
    handleClose() {
      this.$emit("update:dialogVisible", false);
    },
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      // this.fetchData();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val;
      // console.log(val)
    },
    toDocument(index, row) {
      window.location.href = row.fujianurl;
    },
    query() {
      // var prints = document.getElementById("printTest");
      // prints.title = "打印的标题";
      // this.$Print(this.$refs.print)
      this.$print(this.$refs.printarea);
    },
    see(data) {
      console.log(data);
    },
  },
};
</script>
<style lang="scss" scoped>
.companybook-main {
  margin: 0 auto;
  padding: 10px;
  border-radius: 4px;
  background-color: #fff;
}

.companybook-body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background-color: #eef1f6;
  padding: 10px;
}

.g-title {
  height: 20px;
  padding-left: 8px;
  line-height: 22px;
  font-size: 16px;
  font-weight: 400;
  border-left: 2px solid #f54e40;
  margin: 10px 0;
  display: inline-block;
}
.padding-top {
    padding: 3.5px 0 !important;
  }
   .span-color {
    background-color: #f6f6f6;
    padding: 10px;
    text-align: center;
  }
@media print {
  .span-color {
    background-color: #f6f6f6;
    padding: 10px;
    text-align: center;
  }
  .padding-top {
    padding: 3.5px 0 !important;
  }
} //专用的打印样式
@page {
  /* size: auto; //默认的*/
  size: 21cm 29.7cm; //纸张大小
  /* size: A4 landscape; portrait/landscape //使用系统中的纸张和方向 */
  margin: 0; //清除打印文档的边距
}
</style>
